<template>
	<view>
		<u-form :model="loginForm" ref="myForm" :error-type="errorTypes" :labelWidth="0">
			<u-form-item prop="phone">
				<u-input 
					placeholder="请输入手机号" 
					border="none" 
					type="number"
					v-model="loginForm.phone" 
					clearable 
				/>
			</u-form-item>
			<u-form-item prop="code">
				<u-input 
					clearable 
					border="none" 
					placeholder="请输入验证码" 
					v-model="loginForm.code" 
				>
					<template slot="suffix">
						<view @click="getCode">{{time}}{{promptText}}</view>
					</template>
				</u-input>
			</u-form-item>
		</u-form>
		<view class="mt-80">
			<ProtocolOptions @checkeVal="handleCheckeVal" />
		</view>
		<view class="mt-80">
			<u-button type="primary" @click="submit">立即登录</u-button>
		</view>
		
	</view>
</template>

<script>
	import ProtocolOptions from "./ProtocolOptions.vue"
 export default {
	 components: {
		 ProtocolOptions
	 },
	 data () {
		 return {
			 promptText: "获取验证码",
			 time: '',
			 codeStare: false,
			 loginForm: {
				 phone: "",
				 code: ""
			 },
			 isCheck: false,
			 errorTypes: ['toast'],
			 rules: {
					phone: [
						{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
						{ validator: (rule, value, callback) => { 
								return uni.$u.test.mobile(value)
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					code: [
						{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }
					]
				}
		 }
	 },
	 onReady() {
	 	this.$refs.myForm.setRules(this.rules);
	 },
	 methods: {
		handleCheckeVal(val){
			this.isCheck = val
			console.log("this.isCheck", this.isCheck)
		},
		getCode(){
			if(!uni.$u.test.mobile(this.loginForm.phone)){
				uni.showToast({
					title: '请输入正确的手机号',
					duration: 3000,
					icon: "none"
				});
			}else {
				let num = 60;
				if( this.codeStare == false){
					this.time ='60';
					this.promptText = 's后获取';
					this.codeStare = true;
					let interval = setInterval(() =>{
						--this.time
					},1000)
					setTimeout(()=>{
						clearInterval(interval)
						this.promptText = '获取验证码'
						this.time = ''
						this.codeStare = false
					},60000)				
				}
			}
		},
		submit(){
			if(!this.isCheck){
				uni.showToast({
					title: '请阅读并同意《隐私政策》和《产品服务协议》',
					duration: 3000,
					icon: "none"
				});
			}else {
				this.$refs.myForm.validate().then(valid=>{
					console.log('ok')
				})
			}
			
		}
	 }
 }
</script>

<style>
</style>